<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>平台概览</title>
    <link rel="shortcut icon" href="img/favicon.ico"/>
    <style>
        body{height:100%;background:#060f4c; margin: 0;
            /*background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0D1D3F), to(rgba(13,67,127, 0.7)));*/
        }
        .fl{float:left;}
        .fr{float:right;}
        .clear{clear:both;}
        ul{padding:0;}
        li{list-style:none}
        a{text-decoration : none}

        .header{width:100%;color:#ddd;text-align:center;height:60px;line-height:60px;font-size:20px;letter-spacing:3px;}
        .center{position:absolute;width:100%;top:60px;bottom:0;}

        #containera1{height: 49%;width:35%;margin-left: 10%;line-height:50px;overflow: auto;}
        #containera1 table{width:100%;text-align:center;color:#ccc;}
        #containera2{height: 49%;width:35%;margin-left: 10%;overflow:hidden;}
        #containera3{height: 42%;width:35%;margin-left: 10%;padding-top:10px;}
        #containera4{height: 49%;width:35%;margin-left: 10%;}
        .xiangqing{font-size:0.9em}
    </style>
</head>
<body>
<div class="header">
    <b>实时数据概览</b>
</div>
<div class="center">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="containera1" class="fl">
        <table class="table1">
            <tr>
                <td class="sort_name" colspan="4" style="font-size:20px;">今日门店交易金额前五名</td>
            </tr>
            <tr>
                <td style="width:10%;">排名</td>
                <td class="mendian_name" style="width:40%;">门店名称</td>
                <td style="width:25%;">交易金额（元）</td>
                <td style="width:25%;">交易笔数（笔）</td>
            </tr>

        </table>
    </div>
    <div id="containera2" class="fl">
        <div style="padding-left:50px;">
            <div style="font-size:1.5em;">
                <b style="color:#ccc">今日交易总额:<span class="total_price"  style="font-size:1.4em;color:#f30"></span><span class="yuan" style="display:none;color:#ccc">元</span></b>
            </div>
            <div class="xiangqing">
                <ul class="ulul" style="line-height:30px;">

                </ul>
            </div>
        </div>
    </div>
    <div id="containera3" class="fl"></div>
    <div id="containera4" class="fl"></div>
    <div class="clear"></div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/highcharts.js"></script>
<script>
    var agent_id = window.location.href.split('?')[1].split('=')[1].split('&')[0];
    var merchant_id = window.location.href.split('?')[1].split('=')[2].split('&')[0];
    var user_type = window.location.href.split('?')[1].split('=')[3];//10为代理商 20为商户
    if(user_type=='20'){
        $('.sort_name').html('今日门店交易金额排名');
        $('.mendian_name').html('门店名称');
    }else{
        $('.sort_name').html('今日商户交易金额排名');
        $('.mendian_name').html('商户名称');
    }
    $.ajax({
        url:"http://water.ahtyt.com/one/api/v2/dashborad/dashboard",
        type:'get',
        async:false,
        data:{ 'agent_id':agent_id,'merchant_id':merchant_id,'user_type':user_type },
        success:function(e){
            res = e.response.data;

            //--------------近七天交易数据展示 container5---------------------------
            t_list = res.t_list;
            t_list_time = [];//时间数组
            t_list_count = [];//交易笔数数组
            t_list_price = [];//交易金额数组
            if(t_list!=undefined) {
                for (var j = 0; j < t_list.length; j++) {
                    t_list_time.push(t_list[j]['order_date']);
                    t_list_count.push(t_list[j]['total_count']);
                    t_list_price.push(t_list[j]['total_price']);
                }
            }

        }
    });
    //今日交易总额
    setInterval(function () {
        $.ajax({
            url:"http://water.ahtyt.com/one/api/v2/dashborad/dashboard",
            type:'post',
            async:false,
            data:{ 'agent_id':agent_id,'merchant_id':merchant_id,'user_type':user_type },
            success:function(d){
                res = d.response.data;
                //--------------今日交易总额----------------------------
                today_price = res.today_price;
                $('.total_price').html(today_price);
                $('.yuan').css('display','');
                //-------------今日交易数据--------------------
                real_trade = res.real_trade;
                $('.ulul').html('');
                if(real_trade!=undefined) {
                    for (var c = 0; c < real_trade.length; c++) {
                        $('.ulul').append("<li style='color:#ccc'>" + real_trade[c]['orderDate'].split('.')[0] + " &nbsp;&nbsp;<b>" + real_trade[c]['storeName'] + "</b> 收款 <b>" + real_trade[c]['totalPrice'] + "</b>元</li>")
                    }
                }

            }
        });
    }, 5000);
    //今日当时交易总额
    var datadata = [];
    datadata['money'] = 0;
    datadata['time'] = '';
    $.ajax({
        url:"http://water.ahtyt.com/one/api/v2/dashborad/dashboard",
        type:'post',
        async:false,
        data:{ 'agent_id':agent_id,'merchant_id':merchant_id,'user_type':user_type },
        success:function(z){
            res = z.response.data;
            //-------------今日门店交易金额前五名--------------------
            store_ranking = res.store_ranking;
            if(store_ranking!=undefined) {
                for (var b = 0; b < store_ranking.length; b++) {
                    $('.table1').append("<tr><td>" + (b + 1) + "</td><td>" + store_ranking[b]['_id'] + "</td><td>" + store_ranking[b]['total_price'] / 1000 + "</td><td>" + store_ranking[b]['total_num'] + "</td></tr>")
                }
            }
            //-------------今日交易数据--------------------
            real_trade = res.real_trade;
            if(real_trade!=undefined) {
                for (var c = 0; c < real_trade.length; c++) {
                    datadata['money'] = datadata['money'] * 1 + real_trade[c]['totalPrice'] * 1;
                    datadata['time'] = real_trade[c]['orderDate'];
                }
            }
        }
    });
    var k1=new Array();
    var y=0;
    var yi=1;
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    function activeLastPointToolip(chart) {
        var points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length -1]);
    }

    y=parseInt(datadata.money);
    x=datadata.time;
    var date = new Date(datadata.time);
    x=date.getTime();
    k1[0]=[x,y];
    $('#containera3').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            backgroundColor:'transparent',
            events: {
                load: function () {
                    var series = this.series[0],
                        chart = this;
                    setInterval(function () {
                        datadata['money'] = 0;
                        $.ajax({
                            url:"http://water.ahtyt.com/one/api/v2/dashborad/dashboard",
                            type:'post',
                            async:false,
                            data:{ 'agent_id':agent_id,'merchant_id':merchant_id,'user_type':user_type },
                            success:function(z){
                                res = z.response.data;
                                real_trade = res.real_trade;
                                if(real_trade!=undefined) {
                                    for (var c = 0; c < real_trade.length; c++) {
                                        datadata['money'] = datadata['money'] * 1 + real_trade[c]['totalPrice'] * 1;
                                        datadata['time'] = real_trade[c]['orderDate'];
                                    }
                                }
                                // x=datadata.time;
                                // var date = new Date(datadata.time);
                                // x=date.getTime();
                                // y=parseInt(datadata.money);
                                function getRandom(min,max){
                                    //x上限，y下限
                                    var x = max;
                                    var y = min;
                                    if(x<y){
                                        x=min;
                                        y=max;
                                    }
                                    var rand = parseInt(Math.random() * (x - y + 1) + y);
                                    return rand;
                                }
                                y=getRandom(100,1000);
                                x=x+1000;
                                if(yi<7){
                                    series.addPoint([x, y], true, false);
                                    activeLastPointToolip(chart);
                                    yi++;
                                }else{
                                    series.addPoint([x, y], true, true);
                                    activeLastPointToolip(chart);
                                }
                            }
                        });
                    }, 2000);
                }
            }
        },
        credits: {
            enabled: false //不显示LOGO
        },
        title: {
            text: '今日交易数据',
            style: {
                color: '#ccc',
                fontWeight: 'normal',
                fontSize: '18px'
            }

        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            labels: {  //设置x或者y轴字体样式
                style: {
                    color: '#ccc',
                    fontFamily:'微软雅黑'
                }
            }
        },
        yAxis: {
            title: {
                text: '交易金额',
                style: {
                    color: '#ccc',
                    fontSize: '12px'
                }
            },
            plotLines: [{
                value: 0,
                width: 1,
                tickInterval:1000,
                color: '#808080'
            }],
            labels: {
                formatter: function () {
                    return this.value
                },
                style: {
                    color: '#ccc',
                    fontFamily:'微软雅黑'
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +Highcharts.numberFormat(this.y, 2)+'元';
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: '当前金额',
            data: k1
        }]
    }, function(c) {
        activeLastPointToolip(c);
    });

</script>
<!--<script src="js/containera1.js"></script>-->
<!--<script src="js/containera2.js"></script>-->
<!--<script src="js/containera3.js"></script>-->
<script src="js/containera4.js"></script>

</html>